<template>
  <view>
    <view class="searchBox">
      <uni-search-bar :focus="true" placeholder="请输入搜索内容" cancel-button="none" @input="input"
        :radius="100"></uni-search-bar>
    </view>
    <view class="sugglist" v-if="searchResult.length!==0">
      <view class="suggitem" v-for="(item,index) in searchResult" :key="index" @click="goToDetail(item)">
        <view class="goodsname">
          {{item.goods_name}}
        </view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <view class="history-list" v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons @click="clean" class="del" type="trash-filled" size="16"></uni-icons>
        <view class="histroy-item">
          <uni-tag @clikc="goToGoodsList(item)" class="history-tag" v-for="(item,index) in hisToryList" :key="index"
            :text="item" />
        </view>
      </view>
      <view class="history-title">


      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timee: null,
        kw: '',
        searchResult: [],
        hisToryList: []
      };
    },
    onLoad() {
      this.hisToryList = JSON.parse(uni.getStorageSync('kw') || '[]')
    },
    methods: {
      input(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = e
          this.getSearchList()
        }, 500)
      },
      async getSearchList() {
        if (this.kw === '') {
          this.searchResult = []
          return
        }
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: this.kw
        })
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchResult = res.message
        this.saveHisToryList()
      },
      goToDetail(item) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id' + item.goods_id
        })
      },
      saveHisToryList() {
        this.hisToryList.unshift(this.kw)
        const obj = new Set(this.hisToryList)
        this.hisToryList = [...obj]
        // 数据持久化
        uni.setStorageSync('kw', JSON.stringify(this.hisToryList))
      },
      clean() {
        this.hisToryList = []
        uni.removeStorageSync('kw')
      },
      goToGoodsList(kw) {
        uni.navigateTo({
          url: '/subpkg/goods_list?query' + kw
        })
      }
    }
  }
</script>

<style lang="scss">
  .searchBox {
    position: sticky;
    top: 0px;
    z-index: 9999;
  }

  .sugglist {
    padding: 0 5px;

    .suggitem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      padding: 13px 0px;
      border: 1px solid #efefef;

      .goodsname {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .history-tag {
    margin: 16rpx;
  }

  .histroy-item {
    border-top: 1px solid #efefef;
    padding: 10rpx;
  }

  .del {
    float: right;
  }
</style>